<template>
  <div class="ms-list" ref="msList">
    <el-row class="operation">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">
          <icon style="color: #0088cc" name="home"></icon>
        </el-breadcrumb-item>
        <el-breadcrumb-item>品牌优化</el-breadcrumb-item>
        <el-breadcrumb-item>案例展示</el-breadcrumb-item>
        <el-breadcrumb-item>案例详情</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>

    <div class="news">
      <!--<div class="scroll" ref="list" :style="listStyle">-->
      <el-scrollbar class="scroll" :style="listStyle">
        <div class="list" v-show="showList">
          <div class="item" v-for="(item, index) in list">
            <div class="img" :style="{backgroundImage: 'url(' + item.thumbnail + ')'}">{{ item.thumbnail ? '' : '暂无略缩图' }}</div>
            <!--<div class="img"></div>-->
            <div class="content">
              <div class="title">{{ item.title }}</div>
              <div class="time-author">
                <div class="time">{{ formatTime(item.publishTime) }}</div>
                作者:
                <div class="author">{{ item.publisher }}</div>
              </div>
              <div class="text" v-html="filter(item.content)"></div>
              <div class="see-detail" @click="seeDetail(index)">查看详情&nbsp;&nbsp;<icon name="angle-double-right" scale="1.2"></icon></div>
            </div>
          </div>
          <el-button @click="loadMore()" :disabled="pagination.page >= pagination.totalPage">
            {{pagination.page >= pagination.totalPage ? '已无更多...' : '加载更多...'}}
          </el-button>
        </div>
        <div class="detail" v-show="!showList">
          <div class="back" @click="backDetail()"><icon name="angle-left" scale="3"></icon></div>
          <!--<div class="detail-scroll" ref="detail" :style="detailStyle">-->
          <el-scrollbar class="detail-scroll" ref="detail" :style="detailStyle">
            <div class="text" :style="{marginTop: 0}">
              <div class="title">{{ detail.title }}</div>
              <div class="time-author">
                <div class="time">{{ formatTime(detail.publishTime) }}</div>
                作者:
                <div class="author">{{ detail.publisher }}</div>
              </div>
              <div class="content" v-html="detail.content"></div>
            </div>
          </el-scrollbar>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
  import Api from '@/api/customer/platform/seo-case-show'
  import ResponseParse from '@/utils/response-parse'

  import moment from 'moment'

  export default {
    created () {
      this.list = []
      this.requestList()
    },
    data () {
      return {
        scroll: null,
        detailScroll: null,
        timer: true,
        detail: {
          content: '',
          title: '',
          publishTime: '',
          publisher: ''
        },
        showList: true,
        screenWidth: document.body.clientWidth,
        screenHeight: document.body.clientHeight,
        list: [],
        pagination: {}
      }
    },
    mounted () {
      const _this = this
      window.onresize = () => {
        return (() => {
//          window.screenWidth = document.body.clientWidth
//          _this.screenWidth = window.screenWidth
          _this.screenWidth = document.body.clientWidth
          _this.screenHeight = document.body.clientHeight
        })()
      }
    },
    computed: {
      listStyle () {
        return {
          width: (this.screenWidth - 300) + 'px',
          height: (this.screenHeight - 60) + 'px',
          backgroundColor: this.showList ? '#ccc' : '#fff'
        }
      },
      detailStyle () {
        return {
          width: '800px',
          height: (this.screenHeight - 70) + 'px'
        }
      }
    },
    methods: {
      requestList () {
        let params = Object.assign({}, {page: this.pagination.page, pageSize: this.pagination.pageSize}, this.pagination)
        Api.list({search: params}, response => {
          let status = response.status || 0
          let body = response.data || []
          if (status === 200 || status === 204) {
            this.pagination = ResponseParse.pagination(response.headers)
            this.list = this.list.concat(body)
          } else {
          }
        })
      },
      loadMore () {
        this.pagination.page = this.pagination.page + 1
        this.requestList()
      },
      formatTime (value) {
        return moment(value, 'YYYY-MM-DD hh:mm:ss').format('YYYY-MM-DD')
      },
      filter (str) {
//        str.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1")
        return str.replace(/<[^>]*>?/g, '')
      },
      seeDetail (index) {
        this.detail.content = this.list[index].content
        this.detail.title = this.list[index].title
        this.detail.publishTime = this.list[index].publishTime
        this.detail.publisher = this.list[index].publisher
        this.showList = false
      },
      backDetail () {
        this.showList = true
      }
    },
    watch: {
      screenWidth (val) {
        if (!this.timer) {
          this.screenWidth = val
          this.timer = true
          setTimeout(() => {
            this.timer = false
          }, 400)
        }
      },
      screenHeight (val) {
        if (!this.timer) {
          this.screenHeight = val
          this.timer = true
          setTimeout(() => {
            this.timer = false
          }, 400)
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../assets/styles/env";

  .ms-list {
    position: absolute;
    .news {
      .scroll {
        overflow: hidden;
        background-color: #CCCCCC;
        box-shadow: #666 0 0 10px;
        .list {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          @media screen and (min-width: 1920px) {
            .item {
              margin-bottom: 10px;
              height: 200px;
              width: 47%;
              box-shadow: #666 0 0 10px;
              display: flex;
              align-items: center;
              .img {
                margin: 0 50px 0 20px;
                height: 160px;
                width: 255px;
                box-shadow: #666 0 0 10px;
                background-image: url(https://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000);
                background-size: 100% 100%;
              }
              .content {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                flex: 1;
                overflow: hidden;
                height: 160px;
                .title {
                  font-size: 25px;
                  color: rgb(49, 49, 49);
                  overflow: hidden;
                  text-overflow:ellipsis;
                  white-space: nowrap;
                }
                .time-author {
                  font-size: 15px;
                  color: rgb(160, 160, 160);
                  display: flex;
                  .time {
                    margin-right: 10px;
                  }
                  .author {
                    margin-left: 10px;
                  }
                }
                .text {
                  height: 48px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box; //将元素设为盒子伸缩模型显示
                  -webkit-box-orient: vertical; //伸缩方向设为垂直方向
                  -webkit-line-clamp: 2;  //超出3行隐藏，并显示省略号
                }
                .see-detail {
                  color: red;
                  display: flex;
                  align-items: center;
                  cursor:pointer;
                }
              }
            }
            .item:nth-child(1), .item:nth-child(2) {
              margin-top: 10px;
            }
            .item:nth-child(4n), .item:nth-child(4n+1) {
              background-color: #fff;
            }
            .item:nth-child(4n+2), .item:nth-child(4n+3) {
              background-color: rgb(245, 247, 250);
            }
          }
          @media screen and (max-width: 1919px) {
            .item {
              margin-bottom: 10px;
              height: 250px;
              width: 96%;
              box-shadow: #666 0 0 10px;
              display: flex;
              align-items: center;
              .img {
                margin: 0 75px 0 25px;
                height: 200px;
                width: 325px;
                box-shadow: #666 0 0 10px;
                background-size: 100% 100%;
              }
              .content {
                padding-right: 25px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                flex: 1;
                overflow: hidden;
                height: 200px;
                .title {
                  font-size: 22px;
                  color: rgb(49, 49, 49);
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                .time-author {
                  font-size: 15px;
                  color: rgb(160, 160, 160);
                  display: flex;
                  .time {
                    margin-right: 10px;
                  }
                  .author {
                    margin-left: 10px;
                  }
                }
                .text {
                  height: 80px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box; //将元素设为盒子伸缩模型显示
                  -webkit-box-orient: vertical; //伸缩方向设为垂直方向
                  -webkit-line-clamp: 4;  //超出4 行隐藏，并显示省略号
                }
                .see-detail {
                  color: red;
                  display: flex;
                  align-items: center;
                  cursor:pointer;
                }
              }
            }
            .item:nth-child(1) {
              margin-top: 10px;
            }
            .item:nth-child(2n) {
              background-color: #fff;
            }
            .item:nth-child(2n+1) {
              background-color: rgb(245, 247, 250);
            }
          }
          .item:hover {
            background-color: rgb(255, 246, 215);
          }
        }
        .detail {
          display: flex;
          word-wrap:break-word;
          word-break:break-all;
          @media screen and (min-width:1367px) {
            justify-content: center;
          }
          .back {
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 50px;
            border-radius:50px;
            background-color: rgb(0, 136, 204);
          }
          .detail-scroll {
            /*border: 10px solid rgb(245, 247, 250);*/
            margin: 10px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            .title {
              line-height: 50px;
              font-size: 50px;
              color: rgb(49, 49, 49);
            }
            .text {
              width: 800px;
              .time-author {
                font-size: 15px;
                color: rgb(160, 160, 160);
                display: flex;
                .time {
                  margin-right: 10px;
                }
                .author {
                  margin-left: 10px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
